@mixin grid() {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@mixin gridRow() {
  display: flex;
  flex-direction: row;
  align-items: center;
}

@mixin gridH1() {
  @include setFontSize($size-20);
  @include setMargin($size-0, $size-0, $size-20, $size-0);
}

@mixin gridTwoItem() {
  @include setMargin($size-0, $size-0, $size-20, $size-0);

  box-sizing: border-box;
  width: calc(50% - 20px);

  @media screen and (max-width: $medium) {
    width: 100%;
    padding: $size-10;
  }
}

@mixin gridThreeItem() {
  @include setMargin($size-0, $size-0, $size-20, $size-0);

  box-sizing: border-box;
  width: calc(33% - 20px);

  @media screen and (max-width: $medium) {
    width: 100%;
    padding: $size-10;
  }
}

@mixin gridThreeItemAlways() {
  @include gridThreeItem();

  @media screen and (max-width: $medium) {
    width: calc(33% - 20px);
    padding: 0;
  }
}

@mixin gridItemBox() {
  @include setMargin($size-0, $size-0, $size-40, $size-0);

  box-sizing: border-box;
  padding: $size-20;
  box-shadow: $size-0 $size-2 $size-10 $black-10;
  border-radius: $size-4;

  @media screen and (max-width: $medium) {
    padding: $size-10;
  }
}

@mixin gridItemBoxLight() {
  @include gridItemBox();

  background: $white;
  color: $black;

  h1,
  h1 > a {
    @include gridH1();

    color: $mulberry;
  }
}

@mixin gridItemBoxDark() {
  @include gridItemBox();

  background: $mulberry;
  color: $white;

  h1,
  h1 > a {
    @include gridH1();

    color: $white;
  }
}

@mixin gridItemBoxGhost() {
  @include gridItemBox();

  background: $black-20;
  color: $white;

  h1,
  h1 > a {
    @include gridH1();

    color: $white;
  }
}

.grid {
  &Item {
    &BoxLight {
      @include gridItemBoxLight();
    }

    &BoxDark {
      @include gridItemBoxDark();
    }

    &BoxGhost {
      @include gridItemBoxGhost();
    }
  }

  &Two {
    @include grid();

    &Item {
      @include gridTwoItem();

      &BoxLight {
        @include gridTwoItem();
        @include gridItemBoxLight();
      }

      &BoxDark {
        @include gridTwoItem();
        @include gridItemBoxDark();
      }

      &BoxGhost {
        @include gridTwoItem();
        @include gridItemBoxGhost();
      }
    }
  }

  &Three {
    @include grid();

    &Item {
      @include gridThreeItem();

      &BoxLight {
        @include gridThreeItem();
        @include gridItemBoxLight();
      }

      &BoxDark {
        @include gridThreeItem();
        @include gridItemBoxDark();
      }

      &BoxGhost {
        @include gridThreeItem();
        @include gridItemBoxGhost();
      }
    }
  }

  &ThreeAlways {
    @include grid();

    align-items: center;

    &Item {
      @include gridThreeItemAlways();

      &BoxLight {
        @include gridThreeItem();
        @include gridItemBoxLight();
      }

      &BoxDark {
        @include gridThreeItem();
        @include gridItemBoxDark();
      }

      &BoxGhost {
        @include gridThreeItem();
        @include gridItemBoxGhost();
      }
    }
  }

  &Many {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;

    &Item {
      @include setMargin($size-10, $size-10, $size-10, $size-10);
    }
  }

  &Row {
    @include gridRow();

    @media screen and (max-width: $small) {
      flex-direction: column;
      text-align: center;
    }

    &SpaceBetween {
      @include gridRow();

      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
}
